<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Training jquery and css	</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<link rel="stylesheet" href="css/styles.css" type="text/css"/>
	<script src="javascript/showimage.js"></script>
	<style rel="stylesheet">
		body{
			background-color: #CFCFCF;
		}
		#page{
			position: relative;
			width: 900px;
			height:840px;
			background-color: #FFFFFF;
			margin:auto;
		}
		#header{
			text-align:center;
			width: 900px;
			height:50px;
			background-color: #CCFFCC;
		}
		#top{			
			width: 900px;
			height:100px;
			background-color: #89ac34;
		}
		#left{			
			float:left;
			width: 100px;
			height:570px;
			background-color: #CCFF66;
		}
		#right{			
			height:570px;
			float:right;
			width: 100px;
			background-color: #66FF66;
		}
		#center{			
			height:570px;
			float:left;	
			width: 500px;
			background-color:#FFFFFF;
		}
		#bottom{			
			float:left;
			width:900px;
			height: 100px;
			background-color:#89AC34;
		}
		#footer{
			position:absolute;
			background-color: #11ee55;
			width: 900px;
			height: 20px;
			bottom: 0;
			left:0;
			text-align : center;
		}
		#top #ul_ho{
			position:relative;
			list-style-type:none;
			margin:0;
			padding:0;
		}
		#top #ul_ho li{
			position:relative;
			float:left;
			margin:0px 5px 0px 5px ;
			padding:0px 0px 0px 2px;
		}
		img{
			float:left;
			-webkit-transition: all .5s ease-in-out;
		}
		img:hover{
			-webkit-transform: scale(1.2);
			-moz-transform: scale(1.2);
			-o-transform: scale(1.2);
			transform: scale(1.2);			
		}
	</style>
</head>	
<body>
	<div id="page">
		<header id="header">
			<h3>Header</h3>
		</header>	
		<div id="top">
			<ul id="ul_ho">
				<li><a><img src="http://192.168.0.167/data/images/b.jpg" width="100px" height="100px" /></a>		
				</li>	
				<li><a><img src="http://192.168.0.167/data/images/b.jpg" width="100px" height="100px" /></a>		
				</li>	
				<li><a><img src="http://192.168.0.167/data/images/b.jpg" width="100px" height="100px" /></a>		
				</li>	
				<li><a><img src="http://192.168.0.167/data/images/b.jpg" width="100px" height="100px" /></a>		
				</li>	
				<li><a><img src="http://192.168.0.167/data/images/b.jpg" width="100px" height="100px" /></a>		
				</li>	
				<li><a><img src="http://192.168.0.167/data/images/b.jpg" width="100px" height="100px" /></a>		
				</li>	
				<li><a><img src="http://192.168.0.167/data/images/b.jpg" width="100px" height="100px" /></a>		
				</li>	
				<li><a><img src="http://192.168.0.167/data/images/b.jpg" width="100px" height="100px" /></a>		
				</li>					
			</ul>
		</div>	
		<div id="left">Left</div>
		<div id="center">Center</div>
		<div id="right">Right</div>
		<div id="bottom">Bottom</div>
		<div id="footer">
			<h3>Footer</h3>
		</div>		
	</div>
	
</body>	
</html>
